<template>
  <!-- <div class="hello" style="display:inline-block"> -->
  <div class="hello" id="mainDiv">
    <div style>
      <el-button @click="()=>{this.graph.fitView()}">整体显示</el-button>
    </div>
    <div
      id="container"
      style="width:1000px; height:600px;border: 2px;border-color: #53534b;border-style: solid; float:left;"
    ></div>
    <div class="block" style="float:left;">
      <el-tree :data="treedata" node-key="id" default-expand-all :expand-on-click-node="false">
        <span
          class="custom-tree-node"
          slot-scope="{ node, data }"
          @mouseover="mouseOn(node,data)"
          @mouseleave="mouseLeave(node,data)"
        >
          <span style="padding-right:200px" v-if="!data.isModifying">{{ node.label }}</span>
          <el-input style="padding-right:200px;width:50px" v-else v-model="modifyName"></el-input>
          <span @mouseover="mouseOn(node,data)" @mouseleave="mouseLeave(node,data)">
            <el-button
              type="text"
              size="mini"
              @click="node.data.isModifying = true"
              @mouseleave="mouseLeave(node,data)"
              v-show="node.data.isButtonShow"
              style="position:relative;left:-180px"
              v-if="!node.data.isModifying"
            >修改</el-button>
            <el-button
              type="text"
              size="mini"
              @click="data.label = modifyName; data.isModifying = false; G6Render();"
              @mouseleave="mouseLeave(node,data)"
              v-show="data.isButtonShow"
              style="position:relative;left:-180px"
              v-else
            >保存</el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => append(data)"
              @mouseleave="mouseLeave(node,data)"
              v-show="data.isButtonShow"
              style="position:relative;left:-180px"
            >增加子节点</el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)"
              v-show="data.isButtonShow"
              style="position:relative;left:-180px"
            >删除</el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import G6 from "@antv/g6";
let id = 1000;
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    const treedata = [
      {
        id: 1,
        label: "classA",
        isButtonShow: false,
        isModifying: false,
        children: []
      }
    ];
    return {
      graph: null,
      width: 1000,
      height: 600,
      data: {},
      treedata: JSON.parse(JSON.stringify(treedata)),
      modifyName: "",
      
    };
  },

  methods: {
    selectlayout(e) {
      //consoleconsole.log(e);
      this.graph.layout = {
        type: "compactBox", // 布局名称
        direction: e.target.value, // 自左至右布局，可选的有 H / V / LR / RL / TB / BT
        nodeSep: 50, // 节点之间间距
        rankSep: 100 // 每个层级之间的间距
      };
    },
    append(data) {
      const newChild = {
        id: id++,
        label: "classX",
        children: [],
        isButtonShow: false,
        isModifying: false
      };
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(newChild);

      this.G6Render();
    },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
      this.graph.changeData(this.data);
      this.G6Render();
    },
    mouseOn(node, data) {
      node.data.isButtonShow = true;
      //console.log(node.data.isButtonShow);
    },
    mouseLeave(node, data) {
      //如果正在修改该节点，鼠标离开后依然显示
      if (!node.data.isModifying) {
        node.data.isButtonShow = false;
      }
    },
    convertTreeCtrlData2G6TreeData(ctrlData, G6data) {
      //console.log("enter convertTreeCtrlData2G6TreeData");
      G6data.id = ctrlData.label;
      if (ctrlData.children) {
        //console.log("have children");

        G6data.children = [];
        for (var xx of ctrlData.children) {
          var chr = {};
          G6data.children.push(chr);
          this.convertTreeCtrlData2G6TreeData(xx, chr);
        }
      }
    },
    G6Render() {
      let G6data = {};
      G6data.isRoot = true;
      this.convertTreeCtrlData2G6TreeData(this.treedata[0], G6data);
      // console.log(G6data);
      this.data = G6data;
      /* this.graph.data(this.data);
      this.graph.render(); */
      this.graph.changeData(G6data);
      this.graph.fitView();
    }
  },
  mounted() {
    G6.registerEdge("hvh", {
      draw(cfg, group) {
        const startPoint = cfg.startPoint;
        const endPoint = cfg.endPoint;
        const shape = group.addShape("path", {
          attrs: {
            stroke: "#333",
            path: [
              ["M", startPoint.x, startPoint.y],
              ["L", startPoint.x + 5, startPoint.y],
              ["L", startPoint.x + 5, endPoint.y],
              ["L", endPoint.x, endPoint.y]
            ]
          },
          // must be assigned in G6 3.3 and later versions. it can be any value you want
          name: "path-shape"
        });
        return shape;
      }
    });

    this.graph = new G6.TreeGraph({
      container: "container",
      width: this.width,
      height: this.height,
      //linkCenter: true,
      //fitView: true,
      fitViewPadding: 20,
      animate: true, // Boolean，切换布局时是否使用动画过度，默认为 false
      animateCfg: { duration: 0 }, //让自带的动画时间为0，等于取消自带的动画
      modes: {
        default: [
          {
            /* type: "collapse-expand",
            onChange: function onChange(item, collapsed) {
              const data = item.get("model").data;
              data.collapsed = collapsed;
              return true;
            } */
          },
          "drag-canvas",
          "zoom-canvas"
        ]
      },
      defaultNode: {
        size: 30,
        type: "image",
        /* anchorPoints: [
          [0, 0.5],
          [1, 0.5]
        ], */
        style: {
          fill: "#C6E5FF",
          stroke: "#5B8FF9"
        },
        img:
          "https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000"
      },
      defaultEdge: {
        type: "hvh",
        style: {
          stroke: "#A3B1BF"
        },
        sourceAnchor: 1,
        targetAnchor: 0
      },
      layout: {
        type: "compactBox",
        direction: "LR",
        getId: function getId(d) {
          return d.id;
        },
        getHeight: function getHeight() {
          return 16;
        },
        getWidth: function getWidth() {
          return 16;
        },
        getVGap: function getVGap() {
          return 10;
        },
        getHGap: function getHGap() {
          return 30;
        }
      }
    });

    this.graph.node(function(node) {
      return {
        size: 16,
        anchorPoints: [
          [0, 0.5],
          [1, 0.5]
        ],
        style: {
          fill: "#C6E5FF",
          stroke: "#5B8FF9"
        },
        label: node.id,
        labelCfg: {
          position:
            //node.children && node.children.length > 0 ? "left" : "right",
            "bottom",
          offset: 5,
          style: {
            fontSize: 5
          }
        }
      };
    });
    let i = 0;

    /* this.graph.edge(function() {
      i++;
      return {
        type: "hvh",
        color: "#A3B1BF",
        //label: i,
        sourceAnchor: 1,
        targetAnchor: 0,
        style: {
          offset: 15
        }
      };
    }); */

    let G6data = {};
    G6data.isRoot = true;
    this.convertTreeCtrlData2G6TreeData(this.treedata[0], G6data);
    this.data = G6data;

    this.graph.data(this.data);
    this.graph.render();
    this.graph.fitView();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
